<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input type="hidden" id="productId" name="productId" th:value="${productInfo.productId}">


                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品名称：</label>
                            <div class="col-sm-10">
                                <input id="productName" name="productName" class="form-control" type="text" maxlength="40" placeholder=""  th:value="${productInfo.productName}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品简介(描述)：</label>
                            <div class="col-sm-10">
                                <input id="productDesc" name="productDesc"
                                       class="form-control" type="text"  maxlength="50" th:value="${productInfo.productDesc}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否上传视频:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="picType" value="2"    onclick="javascript:show(this);" th:field="*{productInfo.picType}"/> 是
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="picType" value="1"   onclick="javascript:show(this);" th:field="*{productInfo.picType}"/> 否
                                </label>
                            </div>
                        </div>

                        <div class="form-group" id="picDiv">
                            <label class="col-sm-2 control-label">主图一：</label>
                            <div class="col-sm-10">
                                <input @change="fileUpload($event)" accept="image/*" type="file">
                            </div>
                        </div>
                        <div class="form-group" id="picDiv2" v-if="frontPicUrlDataURL">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img :src="frontPicUrlDataURL" alt="主图一" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px" id="img" onclick="showMaxImg(this)">
                                <input type="hidden" name="frontPicUrl" id="frontPicUrl" th:value="${productInfo.frontPicUrl}">
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-sm-2 control-label">主图二：</label>
                            <div class="col-sm-10">
                                <input @change="fileUploadOne($event)" accept="image/*" type="file">
                            </div>
                        </div>
                        <div class="form-group"  v-if="frontPicUrlOneDataURL">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img :src="frontPicUrlOneDataURL" alt="主图二" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px"  onclick="showMaxImg(this)">
                                <input type="hidden" name="frontPicUrlOne" id="frontPicUrlOne" th:value="${productInfo.frontPicUrlOne}">
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-sm-2 control-label">主图三：</label>
                            <div class="col-sm-10">
                                <input @change="fileUploadTwo($event)" accept="image/*" type="file">
                            </div>
                        </div>
                        <div class="form-group"  v-if="frontPicUrlTwoDataURL">
                            <div class="col-sm-8 col-sm-offset-3">
                                <img :src="frontPicUrlTwoDataURL" alt="主图三" class="img-responsive img-thumbnail"
                                     style="height: 80px;width: 120px" onclick="showMaxImg(this)">
                                <input type="hidden" name="frontPicUrlTwo" id="frontPicUrlTwo" th:value="${productInfo.frontPicUrlTwo}">
                            </div>
                        </div>


                        <div class="form-group" id="videoDiv">
                            <label class="col-sm-2 control-label">上传视频：</label>
                            <div class="col-sm-10">
                                <input type="hidden" name="videoUrl" id="videoUrl" th:value="${productInfo.videoUrl}">
                                <button type="button" class="layui-btn" id="video" >
                                    <i class="fa fa-cloud"></i>上传视频
                                </button>（上传视频不得大于10M）
                            </div>
                        </div>
                        <div class="form-group" th:if="${productInfo.videoUrl} != null">
                            <label class="col-sm-2 control-label">视频：</label>
                        </div>
                        <div class="form-group" th:if="${productInfo.videoUrl} != null">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button id="Modal" type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#roleModal" style="width:80px;height:36px;">查看视频
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属分类</label>
                            <div class="col-sm-10">
                                <input id="classId" name="classId" class="hidden" th:value="${productInfo.classId}">
                                <input id="className" name="className" class="form-control" type="text"
                                    style="cursor: pointer;" onclick="openClass()" th:value="${productInfo.className}"
                                    readonly="readonly" placeholder="所属分类" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">原价：</label>
                            <div class="col-sm-4">
                                <input type="text" id="originalPrice" name="originalPrice" data-placeholder="原价" class="form-control" maxlength="8"
                                       onkeyup="value=value.replace(/[^\d\.]/g,'')"  th:value="${productInfo.originalPrice}">
                            </div>
                            <label class="col-sm-2 control-label">现价：</label>
                            <div class="col-sm-4">
                                <input type="text" id="price" name="price" th:value="${productInfo.price}"
                                       data-placeholder="现价" class="form-control" maxlength="8" onkeyup="value=value.replace(/[^\d\.]/g,'')" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态:</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input type="radio" name="productStatus" value="1"   th:field="*{productInfo.productStatus}"/>上架
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="productStatus" value="0"   th:field="*{productInfo.productStatus}"/>下架
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品标签:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="productTagId" th:field="*{productInfo.productTagId}" value="1"  checked/>热卖
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="productTagId" th:field="*{productInfo.productTagId}" value="2"  />推荐
                                </label>
                            </div>
                        </div>

                        <!-- 颜色 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">颜色属性:</label>
                            <div class="col-sm-10 ">
                                <label th:each="color,colorStat : ${colorCfgs}" class="checkbox-inline">
                                    <input name="colorIds[]" type="checkbox" th:value="${color.colorId}" th:id="'color'+${color.colorId}"
                                           th:text="${color.colorName}" >
                                </label>
                            </div>
                        </div>

                        <!-- 车型 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">规格</label>
                            <div class="col-sm-10">
                                <input id="specsIds" name="specsIds[]" class="hidden" th:value="${specsIds}">
                                <input id="specsName" name="specsName" class="form-control" type="text"
                                       style="cursor: pointer;" onclick="openSpecs()"
                                       readonly="readonly" placeholder="规格" th:value="${specsNames}">
                            </div>
                        </div>

<!--                        &lt;!&ndash; 规格 &ndash;&gt;-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">规格:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <label th:each="specs,specsStat : ${specsCfgs}" class="checkbox-inline">-->
<!--                                    <input name="specsIds[]" type="checkbox"  th:value="${specs.specsId}"-->
<!--                                           th:text="${specs.specsName}" th:id="'specs'+${specs.specsId}">-->
<!--                                </label>-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序：</label>
                            <div class="col-sm-10">
                                <input id="orderNum" name="orderNum" th:value="${productInfo.orderNum}"
                                       class="form-control" type="text" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">实际销量：</label>
                            <div class="col-sm-10">
                                <input id="actSales" name="actSales" th:value="${productInfo.actSales}"
                                       class="form-control" type="number" maxlength="7" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">月销量：</label>
                            <div class="col-sm-10">
                                <input id="monthSales" name="monthSales" th:value="${productInfo.monthSales}"
                                       class="form-control" type="number"  maxlength="7">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">销量：</label>
                            <div class="col-sm-10">
                                <input id="sales" name="sales" th:value="${productInfo.sales}"
                                       class="form-control" type="number" maxlength="7">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">售后方式:</label>
                            <div class="col-sm-10">
                                <select id="afterSaleType" name="afterSaleType" th:field="${productInfo.afterSaleType}"
                                        data-placeholder="售后方式" class="form-control chosen-select">
                                    <option value="1">7天无理由退换货</option>
                                    <option value="2">30天无理由退换货</option>
                                    <option value="3">不支持退换货</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <input id="productDtl" name="productDtl" type="hidden" class="form-control" th:value="${productInfo.productDtl}">
                            <label class="col-sm-2 control-label">商品详情：</label>
                            <div class="col-sm-9">
                                <div class="ibox-content no-padding">
                                    <div id="content_sn" class="summernote"></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="display: none">
                            <div class="col-sm-10">
                                <label th:each="color,specsStat : ${colorList}" class="checkbox-inline">
                                    <input name="color" type="checkbox"  th:value="${color.colorId}">
                                </label>
                            </div>
                        </div>

                        <div class="form-group" style="display: none">
                            <div class="col-sm-10">
                                <label th:each="specs,specsStat : ${specsList}" class="checkbox-inline">
                                    <input name="specs" type="checkbox"  th:value="${specs.specsId}">
                                </label>
                            </div>
                        </div>


                        <div class="text-right form-group">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>

                        <div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg" style="display:inline-block;width:auto;">
                                <div class="modal-content">
                                    <div id="imgshow"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户角色模态框（Modal） -->
<div class="modal fade" id="roleModal" tabindex="-2" role="dialog" aria-labelledby="editRoleLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <video id="my-video" class="video-js" controls preload="auto" width="760" height="400"
                   th:poster="${productInfo.picUrl}"  data-setup="{}">
                <!--<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">-->
                <source id="videoUrls" th:src="${productInfo.videoUrl}" type="video/mp4">
            </video>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div th:include="include::footer"></div>
<script th:inline="javascript">
    $().ready(function () {
        var picType = $("input[name='picType']:checked").val();
        if(picType == '1') {
            $("#videoDiv").hide();
            // $("#picDiv").hide();
            // $("#picDiv2").hide();
        }else if(picType == '2'){
            // $("#picDiv").show();
            // $("#picDiv2").show();
            $("#videoDiv").show();
        }
        getInfo();
        validateRule();
        colorChecked();
        specsChecked();
    });

    function show(_this){
        var val = $(_this).val();
        if(val == '1') {
            $("#videoDiv").hide();
            // $("#picDiv").hide();
            // $("#picDiv2").hide();
            // $('#img').hide();
        }else if(val == '2') {
            $("#videoDiv").show();
            // $("#picDiv").show();
            // $("#picDiv2").show();
            // $('#img').show();


        }
    }

    // 图片放大
    function showMaxImg(obj){
        var src=$(obj).attr("src");
        $("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
        $("#imgModal").modal('show');
    }

    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#video', //绑定元素
            url: '/api/fileUploadByMult', //上传接口
            size: 10000, // 10M
            accept: 'video',
            done: function (r) {
                console.log(r);
                // var base64 = new Base64();
                // var respData = JSON.parse(base64.decode(r));
                if (r.code === 0) {
                    $("#videoUrl").val(r.data.imgPath);
                }
                layer.msg(r.msg);
                console.log('imgPath:::',r.data.imgPath);
            },
            error: function (r) {
                console.log(r);
                // var base64 = new Base64();
                // var respData = JSON.parse(base64.decode(r));
                layer.msg(r.msg);
            }
        });
    });


    function openClass(){
        layer.open({
            type:2,
            title:"选择分类",
            area : [ '300px', '450px' ],
            content:"/app/product/classTree"
        })
    }

    function openSpecs(){
        var specsIds = $('#specsIds').val();
        console.log("specsIds",specsIds);
        layer.open({
            type:2,
            title:"选择分类",
            area : [ '500px', '650px' ],
            content:"/app/product/specsTree?specsIds=" + specsIds,
        })
    }

    function colorChecked(){
        $("input[name='colorIds[]']").each(function(){
            var colorId = $(this).val();
            console.log('colorId+++',colorId);
            $("input[name='color']").each(function(){
                var color = $(this).val();
                if (colorId == color) {
                    $("#color"+colorId).attr("checked","checked");
                }
            });
        });
    }


    function specsChecked(){
        var specsId = [];
        $("input[name='specs']").each(function(){
            var specs = $(this).val();
            specsId.push(specs);
        });
        $('#specsIds').val(specsId);
    }

    function getInfo() {
        $('.summernote').summernote({
            height: '320px',
            lang: 'zh-CN',
            callbacks: {
                onImageUpload: function (files, editor, $editable) {
                    sendFile(files);
                }
            }
        });
        $('#content_sn').summernote('code', $('#productDtl').val());
    }

    function colorContains() {
        
    }
    
    // 上传图片
    const vue = new Vue({
        el: '#signupForm',
        data: {
            reqData: {},
            frontPicUrlDataURL: [[${productInfo.frontPicUrl}]],
            frontPicUrlOneDataURL: [[${productInfo.frontPicUrlOne}]],
            frontPicUrlTwoDataURL: [[${productInfo.frontPicUrlTwo}]]
        },
        methods: {
            fileUpload: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.frontPicUrlDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#frontPicUrl").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            },
            fileUploadOne: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.frontPicUrlOneDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#frontPicUrlOne").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            },
            fileUploadTwo: function (evt) {
                const files = evt.target.files;
                if (files.length == 0) {
                    return;
                }

                const file = files[0];
                if (!/image\/\w+/.test(file.type)) {
                    parent.layer.alert("请选择图像类型的文件！");
                    return;
                }

                let vm = this;

                const fileType = '.' + file.name.toLowerCase().split('.').pop();

                const reader = new FileReader();
                reader.onload = (function (file) {
                    return function (e) {
                        const result = e.target.result;
                        vm.frontPicUrlTwoDataURL = result;
                        const base64Str = result.split(",")[1];
                        //上传地址动态获取
                        var uploadUrl = "/api/fileUpload";
                        $.post(uploadUrl, {fileType, base64Str}, function (resp) {
                            if (!!resp) {
                                const base64 = new Base64();
                                const respData = JSON.parse(base64.decode(resp));
                                if (respData.code === 0) {
                                    $("#frontPicUrlTwo").val(respData.data.imgPath);
                                }
                            }
                        });
                    }
                })(file);
                reader.readAsDataURL(file);
            }
        }

    });

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });


    function save() {
        var picType = $("input[name='picType']:checked").val();
        var frontPicUrl = $('#frontPicUrl').val();
        var frontPicUrlOne = $('#frontPicUrlOne').val();
        var frontPicUrlTwo = $('#frontPicUrlTwo').val();
        var videoUrl = $('#videoUrl').val();
        if (frontPicUrl == null) {
            alert("必须上传主图一");
            return;
        }
        if (frontPicUrlOne == null) {
            alert("必须上传主图二");
            return;
        }
        if (frontPicUrlTwo == null) {
            alert("必须上传主图三");
            return;
        }

        if(picType == 2) {
            if (videoUrl == '') {
                alert("必须上传视频");
                return;
            }
        }
        var content_sn = $("#content_sn").summernote('code');
        $("#productDtl").val(content_sn);
        $.ajax({
            cache: true,
            type: "POST",
            url: "/app/product/update",
            data: $('#signupForm').serialize(), // 你的formid
            async: false,
            success: function (data) {
                layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                productName: {
                    required: true,
                    remote : {
                        url : "/app/product/productInfoNameExit", // 后台处理程序
                        type : "post", // 数据发送方式
                        dataType : "json", // 接受数据格式
                        data : { // 要传递的数据
                            productName : function() {
                                return $.trim($("#productName").val());
                            },
                            productId : function() {
                                return $.trim($("#productId").val());
                            }
                        }
                    }
                },
                productDesc:{
                    required: true
                },
                frontPicUrl:{
                    required: true
                },
                classId:{
                    required: true
                },
                originalPrice:{
                    required: true
                },
                price:{
                    required: true
                },
                "colorIds[]":{
                    required: true
                },
                specsName:{
                    required: true
                },
                productDtl:{
                    required: true
                },
                orderNum:{
                    required: true
                },
                afterSaleType:{
                    required: true
                },
                actSales:{
                    required: true
                },
                monthSales:{
                    required: true
                }
            },
            messages: {
                bannerName: {
                    required: icon + "必填",
                    remote : icon + "商品名称已存在"
                },
                productDesc:{
                    required: icon + "必填",
                },
                frontPicUrl:{
                    required: icon + "必填",
                },
                classId:{
                    required: icon + "必填",
                },
                originalPrice:{
                    required: icon + "必填",
                },
                price:{
                    required: icon + "必填",
                },
                "colorIds[]":{
                    required: icon + "必填",
                },
                specsName:{
                    required: icon + "必填",
                },
                productDtl:{
                    required: icon + "必填",
                },
                orderNum:{
                    required: icon + "必填",
                },
                afterSaleType:{
                    required: icon + "必填",
                },
                actSales:{
                    required: icon + "必填",
                },
                monthSales:{
                    required: icon + "必填",
                }
            }
        })
    }



</script>
<script type="text/javascript" src="/js/appjs/app/product/video.js"></script>
</body>
</html>